<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        
    </style>
</head>
<body>
    <select id="sheng">
        <option value="xxxx">xxxx</option>
    </select>
    <select id="shi"> </select>
    <select id="xian"> </select>
<script>
    var data = {
        "河南省":{
            "郑州市":['中原区','金水区','二七区'],
            "洛阳市":['涧西区','洛龙区','伊滨区','老城区']
        },
        "河北省":{
            "石家庄市":[],
            "邯郸市":[]
        },
        "山西省":{
            "太原市":[],
            "忻州市":[]
        }
    }

    // 获取对象
    // 关联事件
    // 更新对象
    
    var x = document.getElementById("sheng");
    var y = document.getElementById("shi");
    var z = document.getElementById("xian");

    //第一步更新省
    var html = '<option value="">请选择省</option>'
    for (var k in data){
        html += `<option value="${k}">${k}</option>`
    }
    x.innerHTML = html;
    x.value = "";

    x.onchange = function(){
        //更新市
        var v = x.value;
        if(v==""){
            y.innerHTML = ""
            z.innerHTML = ""
        }else{
            var html = '<option value="">请选择市</option>'
            console.log(data[v])
            for(w in data[v]){
                html += `<option value="${w}">${w}</option>`
            }
            y.innerHTML = html
            y.value = ""
        }
    }

    y.onchange = function(){
        //更新区
        var v = y.value;
        if(v==""){
            z.innerHTML = ""
        }else{
            var html = '<option value="">请选择县市区</option>'
            for(w of data[x.value][v]){
                html += `<option value="${w}">${w}</option>`
            }
            z.innerHTML = html
        }
    }


</script>
</body>
</html>

